<template>
  <div id="goodsType-list">
    <u-dialog
      :dialogVisible.sync="createVisible"
      title="添加分类"
      :component="CreatedForm"
      @success="fetchList"
    ></u-dialog>
    <u-dialog
      :dialogVisible.sync="editVisible"
      title="编辑分类"
      :component="CreatedForm"
      :componentModel="editModel"
      @success="fetchList"
    ></u-dialog>
    <u-panel title="分类列表">
      <template slot="action-items">
        <a-button-group>
          <a-tooltip title="添加分类" placement="top">
            <a-button icon="plus" @click="handleCreate"></a-button>
          </a-tooltip>
          <a-tooltip title="导出分类" placement="top">
            <a-button icon="download" @click="handleDownload"></a-button>
          </a-tooltip>
          <a-tooltip title="刷新" placement="top">
            <a-button
              icon="reload"
              @click="fetchList"
              :disable="loading"
            ></a-button>
          </a-tooltip>
        </a-button-group>
      </template>
    </u-panel>
    <u-filters>
      <template slot="items">
        <div class="filters-item">
          <a-tree-select
            style="width: 150px"
            allowClear
            :treeData="typeTree"
            placeholder="请选择类型"
            treeDefaultExpandAll
            v-model="filters.type"
          >
          </a-tree-select>
        </div>
        <div class="filters-item">
          <a-button icon="reload" @click="handleReset" :loading="loading"
            >重置</a-button
          >
          <a-button icon="search" @click="fetchList" :loading="loading"
            >搜索</a-button
          >
        </div>
      </template>
    </u-filters>
    <a-table
      :columns="columns"
      :dataSource="data"
      rowKey="id"
      size="middle"
      @change="handleTableChange"
      :pagination="false"
      :loading="loading"
    >
      <template slot="status" slot-scope="text, record">
        <a-switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          @change="handleChangeStatus(record)"
          :checked="text ? true : false"
        >
        </a-switch>
      </template>
      <template slot="action" slot-scope="record">
        <!-- 编辑操作 -->
        <a-button-group>
          <a-button
            icon="edit"
            @click="handleEdit(record)"
            size="small"
          ></a-button>
          <!-- 删除操作 -->
          <a-popconfirm
            title="确认删除该分类，该操作不可逆?"
            @confirm="handleDelete(record.id)"
            okText="确认"
            cancelText="取消"
          >
            <a-button type="danger" icon="delete" size="small"></a-button>
          </a-popconfirm>
        </a-button-group>
      </template>
    </a-table>
  </div>
</template>

<script>
const pageSize = 15;
import columns from "./components/list";
import {
  fetchSelectTree,
  fetchList,
  setStatus,
  deleteGoodsType
} from "@/api/goodsType";
import UPanel from "@/components/Panel/Panel";
import UFilters from "@/components/Filters/Filters";
import CreatedForm from "./components/Form";
import common from "@/utils/common";
export default {
  components: {
    UPanel,
    UFilters
  },
  data() {
    return {
      data: [],
      typeTree: [],
      createVisible: false,
      editVisible: false,
      columns,
      CreatedForm,
      editModel: {},
      loading: false,
      filters: {
        page: 1,
        size: pageSize,
        type: ""
      },
      pagination: {
        pageSize,
        total: 0
      }
    };
  },
  created() {
    this.fetchList();
    this.fetchSelectTree();
  },
  methods: {
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.filters.page = pager.current;
      this.fetchList();
    },
    fetchList() {
      this.loading = true;
      fetchList(this.filters)
        .then(res => {
          this.loading = false;
          let $data = res.data;
          this.data = $data;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    fetchSelectTree() {
      fetchSelectTree().then(res => {
        let $data = res.data;
        this.typeTree = $data;
      });
    },
    handleChangeStatus(record) {
      record.status = !record.status;
      setStatus(record.id);
    },
    handleCreate() {
      this.createVisible = true;
    },
    handleDownload() {},
    handleReset() {
      this.filters.type = 0;
      this.fetchList();
    },
    handleEdit(record) {
      this.editVisible = true;
      this.editModel = { ...record };
    },
    handleDelete(id) {
      deleteGoodsType(id).then(res => {
        if (res.code === 1) {
          this.fetchList();
        }
      });
    }
  },
  filters: {
    formatMoney(money) {
      return common.formatMoney(money);
    }
  }
};
</script>

<style lang="less" scoped></style>
